<template>
  <div class="root">
    <van-tabs v-model="active" @click="getImgCategory(active)">
      <van-tab v-for="item in ImageList" :key="item.id" :title="item.title" :name="item.id">
        <ul class="img_list">
          <li v-for="item1 in MessageList" :key="item1.id"  @click="goPhotoInfo(item1.id)">
            <div class="van-image">
              <img :src="item1.img_url" class="van-image__img" :v-lazy="item1.img_url" />
            </div>
            <div class="botInfo">
              <p>{{item1.title}}</p>
              <p>{{item1.zhaiyao}}</p>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      ImageList: [],
      MessageList: [],
      IdList: [],
      AllMessage: []
    }
  },
  created () {
    this.getImageList()
  },
  methods: {
    ...mapMutations(['setPhotoListId']),
    async getImageList () {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      this.ImageList = res.message
      console.log(res.message)
      this.ImageList.unshift({ id: 0, title: '全部' })
      for (let i = 1; i < res.message.length; i++) {
        this.IdList[i - 1] = res.message[i].id
      }
      this.getAll()
      this.MessageList = this.AllMessage
      console.log(this.IdList)
    },
    async getImgCategory (id) {
      const { data: res } = await this.$http.get('/api/getimages/' + id)
      this.MessageList = res.message
      console.log(res.message)
    },
    async getAll () {
      for (let i = 0; i < this.IdList.length; i++) {
        let one = this.IdList[i]
        const { data: res } = await this.$http.get('/api/getimages/' + one)
        res.message.forEach(element => {
          this.AllMessage.push(element)
        })
      }
    },
    goPhotoInfo (id) {
      this.setPhotoListId(id)
      this.$router.push('/photoinfo')
    }
  }
}
</script>

<style lang="less" scoped>
.root {
  margin-top: 47px;
}
.img_list {
  padding: 0 10px;
  margin: 0px;
  list-style: none;
  margin-bottom: 70px;
}
.img_list li {
  width: 100%;
  margin: 10px 0;
  border-radius: 5px;
  overflow: hidden;
  height: 300px;
  min-height: 200px;
  position: relative;
}
img {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}
.van-image {
  position: relative;
  display: inline-block;
}
.van-image__img {
  display: block;
  width: 100%;
  height: 100%;
}
.img_list li .van-image {
  width: 100% !important;
  height: 100% !important;
}
.img_list li .botInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 0 3px;
  height: 75px;
}
.img_list li .botInfo p {
  margin: 5px 0;
  font-size: 12px;
}
</style>
